import React, {useState} from 'react'
import {View, Input, Text} from '@tarojs/components'
import './SendInput.scss'

export interface SendInputItem {
  activeIcon?: string
  icon?: string
  num: number
  status: boolean
}

interface Props {
  sendInputs: SendInputItem[],
  cursorSpacing: number
  focus: boolean
  showMask?: boolean
  onclick(item: SendInputItem, index: number): void
  showComment(): void
  onConfirm?: (e: any) => void
}

const SendInput: React.FC<Props> = (props) => {
  const {
    sendInputs, cursorSpacing, onConfirm,
    focus = false, showMask = true,
    onclick, showComment
  } = props

  const [value, setValue] = useState('')

  function onconfirm (e) {
    onConfirm?.(e)
    setValue('')
  }
  return <View className='sendInput'>
    <View className='sendInput_input_wrap' onClick={showComment}>
      {showMask ?  <View className='sendInput_input_wrap_box' /> : <></>}
      <Input className='sendInput_input'
        value={value}
        cursorSpacing={cursorSpacing}
        placeholder='说点什么'
        focus={focus}
        onConfirm={onconfirm}
      />
    </View>
    <View className='sendInput_wrap'>
      {
        sendInputs.map((sendInput, index) => (
          <View className='sendInput_item' key={sendInput.icon} onClick={() => onclick(sendInput, index)}>
            <Text className={`iconfont sendInput_item_icon ${sendInput.status ? sendInput.activeIcon + ' active' : sendInput.icon}`} />
            <Text className='sendInput_item_num'>{sendInput.num}</Text>
          </View>
        ))
      }
    </View>
  </View>
}

export default SendInput
